<template>
  <el-row
    type="flex"
    justify="space-between"
    align="middle"
    style="height: 40px; width: 100%;"
  >
    <el-col :span="20">
      <span>{{ nodeData.name }}</span>
    </el-col>
    <el-col :span="4">
      <el-row type="flex" justify="end">
        <!-- 两个内容 -->
        <el-col>{{ nodeData.manager }}</el-col>
        <el-col>
          <!-- 下拉菜单 element -->
          <el-dropdown @command="handleCommand">
            <span> 操作<i class="el-icon-arrow-down" /> </span>
            <!-- 下拉菜单 -->
            <el-dropdown-menu slot="dropdown" @command="handleCommand">
              <el-dropdown-item command="add">添加子部门</el-dropdown-item>
              <el-dropdown-item v-if="!isRoot" command="edit">编辑部分</el-dropdown-item>
              <el-dropdown-item v-if="!isRoot" command="del">删除部门</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import { reqDelDepartments } from '@/api'

export default {
  props: {
    // 定义传入的属性
    // 你点击的这一条的内容
    nodeData: {
      type: Object,
      required: true
    },
    // 是否是跟节点 用于控制下拉菜单的个数
    isRoot: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // 下拉框内点击事件
    handleCommand(type) {
      if (type === 'add') {
        // console.log('添加')
        // 把你点击的这条内容给传出去
        this.$emit('add-depts', this.nodeData)
      }
      if (type === 'edit') {
        // console.log('编辑')
        // 把你点击的这条内容给传出去
        this.$emit('edit-depts', this.nodeData)
      }
      // 删除部门
      if (type === 'del') {
        // console.log(this.nodeData)
        // 进行提示
        this.$confirm('此操作将永久删除该部门, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          // 调接口及逆行删除
          await reqDelDepartments(this.nodeData.id)
          // 提示用户
          this.$message.success('删除成功!')
          // 通知父级已删除
          this.$emit('del-depts')
        }).catch(() => {})
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.el-tree {
  //::v-deep样式穿透
  ::v-deep {
    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before  {
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
  }
}
</style>
